<template>
	<div class="main">
		<router-view/>
		<div class="bottomTab">
			<van-tabbar v-model="activeTabbar">
				<van-tabbar-item icon="home-o" @click='goIndex' >
					首页
				</van-tabbar-item>
				<van-tabbar-item @click='goReport' icon="chart-trending-o" >
					报表
				</van-tabbar-item>
				<van-tabbar-item icon="manager-o" @click='goMe'>个人中心</van-tabbar-item>
			</van-tabbar>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				activeTabbar:0
			}
		},
		created() {
			this.matchRouter(this.$route.path)
		},
		methods:{
			goIndex(){
				this.$router.push({name:'index'})
			},
			goMe(){
				this.$router.push({name:'me'})
			},
			goReport(){
				this.$router.push({name:'report'})
			},
			matchRouter(routerPath){
				console.log(routerPath)
				if(routerPath.startsWith('/main/index')){
					this.activeTabbar = 0
				}else if(routerPath.startsWith('/main/report')){
					this.activeTabbar = 1
				}else if(routerPath.startsWith('/main/me')){
					this.activeTabbar = 2
				}
			}
		},
		watch:{
			'route.path'(newVal){
				this.matchRouter(newVal)
			},
			'window.localtion'(newVal){
				console.log(newVal)
			}
		}
	}
</script>

<style scoped="scoped">
	.van-tabbar {
		height: 3.12rem;
	}
</style>
